<template>
  <view>
    <operate ref="operate">
      <div class="operate-btn">
        <text @tap="drawer(-1)"
              class="btn cuIcon-roundadd text-green"></text>
        <text>添加事程</text>
      </div>
    </operate>
    <select-btn ref="select"
                @emitEvent="emitEvent"
                @cancel="cancel"
                @selectAll="selectAll"></select-btn>
    <modal ref="modal"
           :modalTitle="modalTitle"
           @action="action">
      <view class="fui-page__spacing">
        <fui-input label="内容"
                   inputBorder
                   isFillet
                   placeholder="请输入内容"
                   v-model:value="content"></fui-input>
      </view>
      <view class="fui-page__spacing">
        <day-picker ref="dayPicker"
                    :day.sync="date"></day-picker>
      </view>
    </modal>
    <view class="calendar">
      <uni-calendar ref="calendar"
                    :date="date"
                    :insert="true"
                    :lunar="true"
                    @change="change" />
    </view>

    <view class="trip">
      <view class="cu-form-group"
            v-for="(item,index) in elements"
            :key="item.TripId"
            @tap="editContent(item)"
            @longpress="show()">
        <view class="title">{{item.Content}}</view>
        <view class="right">
          <view @tap.stop="">
            <switch class='orange radius'
                    @change="Check(index,item)"
                    :class="item.Checked?'checked':''"
                    :checked="item.Checked?true:false">
            </switch>
          </view>
          <check-btn ref="check"
                     v-if="showCheck"
                     @select="select"
                     :checked="checkBox[item.TripId]?true:false"
                     :index="item.TripId"
                     :showCheck="showCheck">
          </check-btn>
        </view>
      </view>

    </view>

  </view>
</template>

<script>
import operate from '@/component/operate.vue'
import modal from '@/component/modal.vue'
import DayPicker from '@/component/dayPicker.vue'
import SelectBtn from '@/component/selectBtn.vue'
import CheckBtn from '@/component/checkBtn.vue'
import { trip_EditContent, trip_EditChecked, trip_DelContent } from "@/utils/request.js"
import { confirm, modArr, modObject, r_GetContent, r_UpdateContent } from "@/utils/function.js"
export default {
  components: {
    operate,
    modal,
    DayPicker,
    SelectBtn,
    CheckBtn,
  },
  data () {
    return {
      rid: -1,
      tripId: -1,
      modalTitle: "添加事程",
      date: "2022-01-01",
      content: "",
      trip: [],
      elements: [],
      modTrip: [],
      delTrip: [],
      showCheck: false,
      checkBox: {}
    };
  },
  methods: {
    change: function (e) {
      this.date = e.year + "-" + e.month + "-" + e.date
      this.getNowTrip()
    },
    Check: function (index, item) {
      item.Checked = !item.Checked
      this.$set(this.elements, index, item)
      this.modTrip = modArr(this.modTrip, item.TripId)
    },
    drawer: function (id) {
      if (id == -1) {
        this.content = ""
      }
      this.tripId = id
      this.$refs.operate.closePopup()
      this.$refs.dayPicker.round = true
      this.$refs.modal.showModal()
    },
    action: function () {
      let userId = uni.getStorageSync('userId')
      let data = JSON.stringify({ "tripId": this.tripId, "rid": parseInt(this.rid), "userId": userId, "content": this.content, "createTime": this.date })
      trip_EditContent(data).then(res => {
        console.log(res);
        this.updateContent()
        this.$refs.calendar.date = this.date
      })
    },
    select: function (index) {
      this.delTrip = modArr(this.delTrip, index)
      this.checkBox = modObject(this.checkBox, index)
    },
    show: function () {
      this.$refs.select.show()
      this.showCheck = !this.showCheck
    },
    emitEvent: function () {
      let data = { "tripIds": this.delTrip.toString() }
      trip_DelContent(data).then(res => {
        console.log(res);
        this.updateContent()
        this.show()
        confirm(1, "删除成功", 4)
      })
    },
    cancel: function () {
      this.showCheck = !this.showCheck
    },
    selectAll: function (flag) {
      for (let i = 0; i < this.elements.length; i++) {
        let v = this.elements[i]
        let index = this.delTrip.indexOf(v.TripId)
        if (index == -1) {
          this.delTrip.push(v.TripId)
          this.checkBox[v.TripId] = v.TripId
        } else {
          this.delTrip.splice(index, 1)
          delete this.checkBox[v.TripId]
        }
      };
    },
    editContent: function (item) {
      this.content = item.Content
      this.date = item.CreateTime
      this.drawer(item.TripId)
    },
    getContent: function () {
      this.trip = r_GetContent(this.rid, this.trip)
      this.getNowTrip()
    },
    getNowTrip: function () {
      this.elements = []
      if (this.trip.length != 0) {
        this.trip.forEach(v => {
          if (v.CreateTime == this.date) {
            this.elements.push(v)
          }
        })
      }
    },
    updateContent: function () {
      r_UpdateContent(this.rid)
      setTimeout(() => {
        this.getContent()
      }, 200);
    },
    formatDate: function () {
      let d = new Date()
      let month = (d.getMonth() + 1).toString()
      let day = (d.getDate()).toString()
      let year = d.getFullYear();

      if (month.length < 2) month = '0' + month;
      if (day.length < 2) day = '0' + day;

      return [year, month, day].join('-');
    }
  },
  onLoad (option) {
    this.rid = option.rid
    this.date = this.formatDate()
    this.getContent()
  },
  onUnload () {
    let data = { "tripIds": this.modTrip.toString() }
    trip_EditChecked(data).then(res => {
      console.log(res);
      this.updateContent()
    })
  }
};
</script>

<style lang="scss" scoped>
.trip {
  padding: 10px;
  .cu-form-group {
    .right {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.calendar {
  padding: 10px;
}
</style>